<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表4</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .customer_list_cnt {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .customer_list_text {
            flex: 0 0 100%;
            max-width: 100%;
            text-align: center;
        }

        .customer_list_text span {
            display: block;
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            color: var(--c_theme);
        }

        .customer_list_text h2 {
            font-size: var(--f_title);
            line-height: var(--l_title);
            color: var(--c_theme);
        }

        .customer_list_text p {
            max-width: 1000px;
            margin: auto;
            padding-top: 40px;
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            color: var(--c_subtitle);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }

        .customer_list_text .button_small {
            margin-left: auto;
            margin-right: auto;
        }

        .customer_list_imgs {
            padding-top: 40px;
            flex: 0 0 100%;
            max-width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .customer_list_imgs li {
            flex: 0 0 33.33%;
            max-width: 33.33%;
            padding: 0 10px;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .customer_list_imgs li img {
            width: 100%;
            max-width: 240px;
            height: 140px;
            object-fit: cover;
        }

        @media (max-width:768px) {
            .customer_list_text p {
                padding-top: 20px;
            }

            .customer_list_text {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .customer_list_imgs {
                flex: 0 0 calc(100% + 20px);
                max-width: calc(100% + 20px);
                margin-left: -10px;
                padding-top: 20px;
            }

            .customer_list_imgs li img {
                height: 140px;
            }
        }

        @media (max-width:575px) {
            .customer_list_imgs li img {
                height: 100px;
            }
        }

        @media (max-width:450px) {
            .customer_list_imgs li img {
                height: 70px;
            }
        }
    </style>
</head>

<body>
    <div class="customer_list modular">
        <div class="public_width">
            <div class="customer_list_cnt">
                <div class="customer_list_text">
                    <span>March 25 / 2019</span>
                    <h2>为什么选择我们？</h2>
                    <p>
                        我们是集策划、设计及执行一站式的服务公司，经过11年的风雨，凭借出色的策划设计及执行能力，如今已发展成为公关活动领域的导向标和践行者。
                        以专业的水准和真诚的服务态度，要据客户的需求和自身特点量身策划，打造优质的公关活动，帮助企业实现更大的利润价值，终实现双赢。
                    </p>
                    <a class="button_small" href="">了解更多&gt</a>
                </div>
                <ul class="customer_list_imgs">
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/cooperation.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>